<template>
  <div id="radar"></div>
</template>

<script setup>
import * as echarts from "echarts";
import { inject, onBeforeUnmount, onMounted } from "vue";

const EventBus = inject('$EventBus')

onMounted(() => {
  var chartDom = document.getElementById("radar");
  var myChart = echarts.init(chartDom);
  var option;

  option = {
    radar: {
      // shape: 'circle',
      indicator: [
        { name: "引用", max: 6500 },
        { name: "产量", max: 16000 },
        { name: "口碑", max: 30000 },
        { name: "贡献", max: 38000 },
        { name: "热度", max: 52000 },
      ],
    },
    series: [
      {
        name: "Budget vs spending",
        type: "radar",
        data: [
          {
            value: [4200, 3000, 20000, 35000, 50000],
            name: "张三",
          },
          {
            value: [5000, 14000, 28000, 26000, 42000],
            name: "李四",
          },
          {
            value: [5300, 12000, 18000, 20000, 36000],
            name: "王二",
          },
        ],
      },
    ],
    legend: {
      bottom: 10,
      data: ['张三', '李四', '王二']
    },
  };

  option && myChart.setOption(option);
  EventBus.on('widthChange', myChart.resize)
});

onBeforeUnmount(() => {
  EventBus.off('widthChange')
})
</script>

<style lang="less" scoped>
#radar{
  height: 300px;
}
</style>